<template>
  <!-- 选择运输工具弹出层 -->
  <el-drawer
    title="勾选运输工具"
    :visible.sync="showDrawer"
    :size="700"
    :modal="true"
    direction="rtl"
    append-to-body
  >
    <el-form
      :model="queryParams"
      ref="queryVehicleForm"
      :inline="true"
      label-width="88px"
      size="mini"
      @submit.native.prevent
    >
      <div class="sub-conditions">
        <div>
          <el-form-item label="车牌号：" prop="queryVeNo">
            <el-input
              v-model.trim="queryParams.queryVeNo"
              placeholder="请输入车牌号查询"
              clearable
              @keyup.enter.native="getList"
            />
          </el-form-item>
          <el-form-item label="备案编号：" prop="veCustomsNo">
            <el-input
              v-model.trim="queryParams.veCustomsNo"
              placeholder="请输入备案编号查询"
              clearable
              @keyup.enter.native="getList"
            />
          </el-form-item>
          <el-button
            class="filter-item"
            type="warning"
            icon="el-icon-search"
            @click="getList"
            size="mini"
            >查询
          </el-button>
        </div>
      </div>
    </el-form>
    <el-table
      v-if="showDrawer"
      :data="tableData"
      size="mini"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ref="veTable"
    >
      <el-empty
        slot="empty"
        :image="require('@/assets/images/empty.png')"
        :image-size="120"
      ></el-empty>
      <el-table-column
        type="selection"
        width="75"
        align="center"
      />
      <el-table-column prop="realVeNo" label="车牌号" align="center">
      </el-table-column>
      <el-table-column
        prop="veCustomsNo"
        label="备案编号"
        align="center"
        min-width="110"
      >
      </el-table-column>
      <el-table-column prop="selfWt" label="自重" align="center">
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :small="true"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-button
      class="filter-item filter-item2"
      type="success"
      icon="el-icon-check"
      @click="sureSelect"
      size="small"
    >
      确定
    </el-button>
  </el-drawer>
</template>

<script>
import { findBdVehicleList } from "@/api/billsdecl/preVehicleRecord";
export default {
  name: "selectBdVehicle",
  dicts: ["bt_vehicle_type"],
  data() {
    return {
      showDrawer: false,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        queryVeNo: "",
        veCustomsNo:'',
        vehicleType:'1'
      },
      tableData: [],
      total: 0,
      selsectedList: [],
    };
  },
  methods: {
    open() {
      this.showDrawer = true;
      this.getList();
    },
    close() {
      this.showDrawer = false;
    },
    getList() {
      this.loading = true;
      findBdVehicleList(this.queryParams)
        .then((resp) => {
          this.tableData = resp.rows;
          this.total = resp.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.veTable.toggleRowSelection(del_row, false);
      }
      this.selsectedList = selection;
    },
    sureSelect() {
      this.$emit("selectVeChange", this.selsectedList[0]);
      this.close();
    }
  },
};
</script>

<style>
</style>
